导航菜单
首页 >  NextUI  > Navbar

Navbar

Navbar

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.

import { Navbar } from "@nextui-org/react";AnatomyNavbar: The wrapper that provides state and general context management.Navbar.Brand: A simple and flexible wrapper for branding content.Navbar.Content: The wrapper that provides the state and variants for the navbar content items.Navbar.Item: The individual items. Must be a direct child of Navbar.Content.Navbar.Link: A link item. Must be a direct child of Navbar.Content.Navbar.Toggle: The toggle button that toggles the navbar. Must be a direct child of Navbar.Navbar.Collapse: The collapse wrapper that provides the state and menu for the navbar collapse items.Navbar.CollapseItem: The individual items. Must be a direct child of Navbar.Collapse.Variants

Navbar can be styled with different variants. The default variant is static, but you can also use floating and sticky.

Active Item Variants

The navbar content active items can be styled with different variants. You can apply the variant and activeColor either to the Navbar.Content or Navbar.Item.

Bordered

You can add a border to the navbar with the isBordered prop.

Compact

You can reduce the height and amount of padding that navbar contains by using the isCompact property.

Hide on scroll

By using the shouldHideOnScroll the navbar hides on scroll down to leave more space for content.

Cursor Highlight

You can highlight the navbar content items when the cursor is over them with the enableCursorHighlight prop.

With Toggle Button

You can show a collapse menu by adding the Navbar.Toggle and Navbar.Collapse components to the navbar.

With Dropdown Menu

You can use the Dropdown component as navbar item to show a dropdown menu.

With Avatar User

A common use case is to display the user's avatar in the navbar. To achieve this, you can use the Avatar component as navbar item or combine it with the Dropdown to show a dropdown menu.

With Search Input

Another common use case is to display a search input in the navbar. You can do this by using the Input component as navbar item.

Disable collapse animation

By adding the disableAnimation prop to the Navbar.Collapse you can disable the animation of the collapse menu and its items when it is opened or closed.

APIsNavbar PropsAttributeTypeDescriptionDefaultchildren*ReactNode ReactNode[]The content of the navbar. It's usually the brand, content, toggle and collapse.-parentRefRefObjectThe parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not.windowvariantNavbarVariantsThe navbar positions variations.staticheightnumber stringThe height of the navbar. When the navbar is compacted (isCompact=true) the height is reduced to 54px.76pxmaxWidthNavbarMaxWidthThe navbar maximum width.lgisBorderedbooleanWhether the navbar should be bordered.falseisCompactbooleanWhether the navbar should be compact. It reduces the height to 54px.falseborderWeightNormalWeightsThe border weight of the bordered navbar.lightshouldHideOnScrollbooleanWhether the navbar should hide on scroll or not.falsedisableShadowbooleanWhether the navbar should have a shadow or not.falsedisableBlurbooleanWhether the navbar should be blurred or not. (only supported by this browser listfalsedisableScrollHandlerbooleanWhether the navbar parent scroll event should be listened to or not.falsecontainerCssStitches.CSSThe css object of the navbar container.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.navNavbar EventsAttributeTypeDescriptionDefaultonScrollPositionChange(scrollPosition: number) => voidThe scroll event handler for the navbar. The event fires when the navbar parent element is scrolled. it only works if disableScrollHandler is set to false or shouldHideOnScroll is set to true.-Navbar.Brand PropsAttributeTypeDescriptionDefaultchildrenReactNode ReactNode[]The content of the navbar brand. It's usually the logo and name of the brand.-hideInHideShowInSets the breakpoint from where the component should start hiding.-showInHideShowInSets the breakpoint from where the component should start displaying.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.spanNavbar.Content PropsAttributeTypeDescriptionDefaultchildrenReactNode ReactNode[]The content of the navbar content. It's usually the navbar item and navbar link.-variantNavbarContentVariantsThe variant of the navbar content items.defaultgapnumber string CSSGapUnitThe gap between each content item. It's 0px for highlight variants.$10activeColorSimpleColorsThe active color of the navbar content items.default (link)underlineHeightNormalWeightsThe height of the navbar content items's underline.normalenableCursorHighlightNormalWeightsWhether the navbar content highlighted cursor should be visible.falseisCursorHighlightRoundedNormalWeightsWhether the navbar content highlighted cursor should be rounded.falsehideInHideShowInSets the breakpoint from where the component should start hiding.-showInHideShowInSets the breakpoint from where the component should start displaying.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.ulNavbar.Item PropsAttributeTypeDescriptionDefaultchildren*ReactNodeThe contents of the navbar item.-variantNavbarContentVariantsThe variant of the navbar item.defaultactiveColorSimpleColorsThe active color of the navbar item.default (link)underlineHeightNormalWeightsThe height of the navbar item underline.normalisActivebooleanWhether navbar item is active.falseisDisabledbooleanWhether navbar item is disabled.falsehideInHideShowInSets the breakpoint from where the component should start hiding.-showInHideShowInSets the breakpoint from where the component should start displaying.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.liNavbar.Link PropsAttributeTypeDescriptionDefaultItemPropsNavbarItemPropsSince dropdown navbar link is based on the Navbar.Item component you can use any of the Navbar.Item props.-LinkPropsLinkPropsSince dropdown navbar link uses the Link component as a base, you can use any of the Link props.-itemCssStitches.CSSOverride the navbar item CSS style.-itemClassNamestringAdd a class name to the navbar item.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.aNavbar.Toggle PropsAttributeTypeDescriptionDefaultchildrenReactNodeThe contents of the navbar toggle. It's usually an hamburguer icon button.-isSelectedHideShowInWhether the element should be selected (controlled).falsedefaultSelectedHideShowInWhether the element should be selected (uncontrolled).-autoFocusHideShowInWhether the element should receive focus on render.falsehideInHideShowInSets the breakpoint from where the component should start hiding.-showInHideShowInSets the breakpoint from where the component should start displaying.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.buttonNavbar.Toggle EventsAttributeTypeDescriptionDefaultonChange(isSelected: boolean) => voidHandler that is called when the element's selection state changes.-Navbar.Toggle Accessibility PropsAttributeTypeDescriptionDefaultidstringThe element's unique identifier. See MDN-aria-labelstringDefines a string value that labels the current element-Navbar.Collapse PropsAttributeTypeDescriptionDefaultchildrenReactNode ReactNode[]The contents of the navbar toggle. It's usually an hamburguer icon button.-transitionDelaynumberThe delay of all collapse items transition. (milliseconds)0transitionTimenumberThe delay of all collapse items transition. (milliseconds)450transitionMatrixCollapseTransitionMatrixThe matrix of all collapse items transition.{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.97, 0, 0, 1, 0, 20)"}disableAnimationbooleanWhether the all navbar collapse items are animated.falsehideInHideShowInSets the breakpoint from where the component should start hiding.-showInHideShowInSets the breakpoint from where the component should start displaying.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.ulNavbar.Collapse Accessibility PropsAttributeTypeDescriptionDefaultidstringThe element's unique identifier. See MDN-aria-labelledbystringIdentifies the element (or elements) that labels the current element-aria-describedbystringIdentifies the element (or elements) that describes the object.-Navbar.CollapseItemAttributeTypeDescriptionDefaultchildrenReactNode ReactNode[]The contents of the navbar toggle. It's usually an hamburguer icon button.-transitionDelaynumberThe delay of all collapse items transition. (milliseconds)0transitionTimenumberThe delay of all collapse items transition. (milliseconds)450transitionMatrixCollapseTransitionMatrixThe matrix of all collapse items transition.{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.97, 0, 0, 1, 0, 20)"}disableAnimationbooleanWhether the navbar collapse item is animated.falsehideInHideShowInSets the breakpoint from where the component should start hiding.-showInHideShowInSets the breakpoint from where the component should start displaying.-cssStitches.CSSOverride Default CSS style.-askeyof JSX.IntrinsicElementsChanges which tag component outputs.liNavbar typesNavbar Variantstype NavbarVariants = "static" | "sticky" | "floating";Navbar Max Widthtype NavbarMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | "fluid";

Note: fluid means the navbar will fill the entire width of the screen. You can see the complete breakpoint list here.

Hide In & Show Intype HideIn = "xsMax" | "smMax" | "mdMax" | "lgMax" | "xlMax";type ShowIn = "xsMin" | "smMin" | "mdMin" | "lgMin" | "xlMin";

Note: You can see the complete media breakpoint list here.

Navbar Content Variantstype NavbarVariants = | "default" | "underline" | "underline-rounded" | "highlight" | "highlight-solid" | "highlight-rounded" | "highlight-solid-rounded";

Note: You can try the complete list of item variants here.

Collapse Transition Matrixtype CollapseTransitionMatrix = { in?: string; out?: string;};

Note: For more information about the transition matrix, check the transition matrix documentation.

Simple Colorstype SimpleColors = | "default" | "primary" | "secondary" | "success" | "warning" | "error";Normal Weightstype NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";CollapseBadgeEdit this page on GitHub

相关推荐: